<template>
  <el-dialog
    width="800px"
    title="审核"
    :visible.sync="open"
    append-to-body
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px" inline>
      <el-form-item label="学生姓名" prop="studentId">
        <el-select v-model="form.studentId" placeholder="请选择学生" filterable clearable disabled style="width: 240px;">
          <el-option
            v-for="item in studentSelectData"
            :key="item.studentId"
            :label="item.name"
            :value="item.studentId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="导师" prop="teacherId">
        <el-select v-model="form.teacherId" placeholder="请选择导师" filterable clearable disabled style="width: 240px;">
          <el-option
            v-for="item in teacherSelectData"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
            <span style="float: left">{{ item.nickName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phoneNumber }}</span></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日志类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择日志类型" disabled filterable clearable style="width: 240px;">
          <el-option
            v-for="dict in dict.type.sxrz_rzlx"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" disabled style="width: 240px;"/>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-model="form.content" type="textarea" disabled rows="8" placeholder="请输入内容" style="width: 600px;"/>
      </el-form-item>
      <el-form-item label="提交时间" prop="tjsj">
        <el-date-picker
          clearable
          disabled
          style="width: 240px"
          v-model="form.tjsj"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择提交时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核状态" prop="shStatus" >
        <el-select v-model="form.shStatus" style="width: 240px;">
          <el-option
            v-if="dict.value !== 'dsh'"
            v-for="dict in dict.type.sxgc_shzt"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核意见" prop="shyj" >
        <el-input v-model="form.shyj" type="textarea" placeholder="请输入审核意见"  style="width: 600px;"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"  style="width: 600px;"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getSxrz,updateSxrz } from "@/api/sxgc/sxrz"
import {getUserSelect} from "@/api/system/user";
import {getStudentSelect} from "@/api/xxgl/xsxx";

export default {
  name: "Sxrz",
  dicts: ['sxrz_rzlx', 'sxgc_shzt'],
  props: {
    modelValue: {
      type: Number,
      default: null
    }
  },
  model: {
    prop: 'modelValue', // 指定 v-model 绑定的 prop 名
    event: 'update:modelValue' // 指定更新时触发的事件名
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 学生信息下拉框数据
      studentSelectData: [],
      teacherSelectData: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        studentId: [{ required: true, message: '请选择学生', trigger: 'change' }],
        teacherId: [{ required: true, message: '请选择导师', trigger: 'change' }],
        type: [{ required: true, message: '请选择日志类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        tjsj: [{ required: true, message: '请选择提交时间', trigger: 'change' }],
        shStatus: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        shsj: [{ required: true, message: '请选择审核时间', trigger: 'change' }],
        shyj: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
      }
    }
  },
  created() {
    this.getUserSelectData()
  },
  computed: {
  },
  watch: {
    //深度监听 ; 子页面 改变 父页面的值
    modelValue: {
      handler() {
        if (this.modelValue){
          this.getInfo(this.modelValue)
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getInfo(){
      getSxrz(this.modelValue).then(response => {
        this.form = response.data
        this.form.shStatus = null
        this.open = true
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
      this.$emit('update:modelValue', null)
    },
    // 表单重置
    reset() {
      this.form = {
        rzId: null,
        studentId: null,
        type: null,
        title: null,
        content: null,
        tjsj: null,
        shStatus: null,
        teacherId: null,
        shsj: null,
        shyj: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null
      }
      this.resetForm("form")
    },
    /** 查询用户下拉框数据 */
    getUserSelectData() {
      /*  roleId  2:学生  3:老师 */
      /* 查询角色为老师下拉框内容*/
      getUserSelect(3).then(response => {
        this.teacherSelectData = response.data
      })
      /* 查询学生信息表 学生下拉框内容*/
      getStudentSelect().then(response => {
        this.studentSelectData = response.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.rzId != null) {
            this.form.shsj = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
            updateSxrz(this.form).then(response => {
              this.$modal.msgSuccess("审核成功")
              this.open = false
              /* 调用父组件的方法刷新列表*/
              this.$parent.getList()
              this.$emit('update:modelValue', null)
            })
          }
        }
      })
    },
  }
}
</script>
